<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="author" content="smohan">
	<meta name="homepage" content="https://smohan.im">
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
	<title>MoCss - 水墨寒的博客</title>
	<link rel="stylesheet" href="../css/mo.css">
	<link rel="stylesheet" href="demo.css">	
</head>
<body>
	<article class="demo">
		<a class="demo-back mo-button--fluid mo-button--primary" href="index.html">目录</a>
		<header class="demo-header">
			<h1>Mo-Switch</h1>
			<p>
				<a href="http://www.kancloud.cn/smohan/mo-css/282363" target="_blank">switch文档</a>
			</p>
		</header>
		<main class="demo-body">
			<section class="demo-section">
				<form class="demo-form" onsubmit="return false">
					<fieldset>
						<legend>default</legend>	
						<label class="mo-switch">
							<input type="checkbox" name="mo-switch">
							<i class="icon"></i>
							<span>switch</span>
						</label>
						<label class="mo-switch">
							<input type="checkbox" name="mo-switch" checked>
							<i class="icon"></i>
							<span>switch</span>
						</label>
						<label class="mo-switch">
							<input type="checkbox" name="mo-switch" disabled>
							<i class="icon"></i>
							<span>switch</span>
						</label>
					</fieldset>
					<fieldset>
						<legend>primary</legend>	
						<label class="mo-switch mo-switch--primary">
							<input type="checkbox" name="mo-switch--primary">
							<i class="icon"></i>
							<span>switch</span>
						</label>
						<label class="mo-switch mo-switch--primary">
							<input type="checkbox" name="mo-switch--primary" checked>
							<i class="icon"></i>
							<span>switch</span>
						</label>
						<label class="mo-switch mo-switch--primary">
							<input type="checkbox" name="mo-switch--primary" disabled>
							<i class="icon"></i>
							<span>switch</span>
						</label>
					</fieldset>	
					<fieldset>
						<legend>negative</legend>	
						<label class="mo-switch mo-switch--negative">
							<input type="checkbox" name="mo-switch--negative">
							<i class="icon"></i>
							<span>switch</span>
						</label>
						<label class="mo-switch mo-switch--negative">
							<input type="checkbox" name="mo-switch--negative" checked>
							<i class="icon"></i>
							<span>switch</span>
						</label>
						<label class="mo-switch mo-switch--negative">
							<input type="checkbox" name="mo-switch--negative" disabled>
							<i class="icon"></i>
							<span>switch</span>
						</label>
					</fieldset>	
					<fieldset>
						<legend>positive</legend>	
						<label class="mo-switch mo-switch--positive">
							<input type="checkbox" name="mo-switch--positive">
							<i class="icon"></i>
							<span>switch</span>
						</label>
						<label class="mo-switch mo-switch--positive">
							<input type="checkbox" name="mo-switch--positive" checked>
							<i class="icon"></i>
							<span>switch</span>
						</label>
						<label class="mo-switch mo-switch--positive">
							<input type="checkbox" name="mo-switch--positive" disabled>
							<i class="icon"></i>
							<span>switch</span>
						</label>
					</fieldset>	
					<fieldset>
						<legend>small</legend>	
						<label class="mo-switch mo-switch--small">
							<input type="checkbox" name="mo-switch--positive" checked>
							<i class="icon"></i>
							<span>switch small</span>
						</label>
						<label class="mo-switch mo-switch--primary mo-switch--small">
							<input type="checkbox" name="mo-switch--positive" checked>
							<i class="icon"></i>
							<span>switch small</span>
						</label>
						<label class="mo-switch mo-switch--positive mo-switch--small">
							<input type="checkbox" name="mo-switch--positive" checked>
							<i class="icon"></i>
							<span>switch small</span>
						</label>
						<label class="mo-switch mo-switch--negative mo-switch--small">
							<input type="checkbox" name="mo-switch--positive" checked>
							<i class="icon"></i>
							<span>switch small</span>
						</label>
					</fieldset>	
					<fieldset>
						<legend>large</legend>	
						<label class="mo-switch mo-switch--large">
							<input type="checkbox" name="mo-switch--positive" checked>
							<i class="icon"></i>
							<span>switch large</span>
						</label>
						<label class="mo-switch mo-switch--primary mo-switch--large">
							<input type="checkbox" name="mo-switch--positive" checked>
							<i class="icon"></i>
							<span>switch large</span>
						</label>
						<label class="mo-switch mo-switch--positive mo-switch--large">
							<input type="checkbox" name="mo-switch--positive" checked>
							<i class="icon"></i>
							<span>switch large</span>
						</label>
						<label class="mo-switch mo-switch--negative mo-switch--large">
							<input type="checkbox" name="mo-switch--positive" checked>
							<i class="icon"></i>
							<span>switch large</span>
						</label>
					</fieldset>	
					<fieldset>
						<legend>reverse</legend>	
						<label class="mo-switch mo-switch--reverse">
							<input type="checkbox" name="mo-switch--reverse" checked>
							<i class="icon"></i>
							<span>reverse</span>
						</label>
						<label class="mo-switch mo-switch--primary mo-switch--reverse">
							<input type="checkbox" name="mo-switch--reverse" checked>
							<i class="icon"></i>
							<span>switch reverse</span>
						</label>
						<label class="mo-switch mo-switch--positive mo-switch--reverse">
							<input type="checkbox" name="mo-switch--reverse" checked>
							<i class="icon"></i>
							<span>switch reverse</span>
						</label>
						<label class="mo-switch mo-switch--negative mo-switch--reverse">
							<input type="checkbox" name="mo-switch--reverse" checked>
							<i class="icon"></i>
							<span>switch reverse</span>
						</label>
					</fieldset>	
					<fieldset>
						<legend>small reverse</legend>	
						<label class="mo-switch mo-switch--small mo-switch--reverse">
							<input type="checkbox" name="mo-switch--reverse" checked>
							<i class="icon"></i>
							<span>small reverse</span>
						</label>
						<label class="mo-switch mo-switch--primary mo-switch--small mo-switch--reverse">
							<input type="checkbox" name="mo-switch--reverse" checked>
							<i class="icon"></i>
							<span>switch small reverse</span>
						</label>
						<label class="mo-switch mo-switch--positive mo-switch--small mo-switch--reverse">
							<input type="checkbox" name="mo-switch--reverse" checked>
							<i class="icon"></i>
							<span>switch small reverse</span>
						</label>
						<label class="mo-switch mo-switch--negative mo-switch--small mo-switch--reverse">
							<input type="checkbox" name="mo-switch--reverse" checked>
							<i class="icon"></i>
							<span>switch small reverse</span>
						</label>
					</fieldset>
					<fieldset>
						<legend>large reverse</legend>	
						<label class="mo-switch mo-switch--large mo-switch--reverse">
							<input type="checkbox" name="mo-switch--reverse" checked>
							<i class="icon"></i>
							<span>switch large reverse</span>
						</label>
						<label class="mo-switch mo-switch--primary mo-switch--large mo-switch--reverse">
							<input type="checkbox" name="mo-switch--reverse" checked>
							<i class="icon"></i>
							<span>switch large reverse</span>
						</label>
						<label class="mo-switch mo-switch--positive mo-switch--large mo-switch--reverse">
							<input type="checkbox" name="mo-switch--reverse" checked>
							<i class="icon"></i>
							<span>switch large reverse</span>
						</label>
						<label class="mo-switch mo-switch--negative mo-switch--large mo-switch--reverse">
							<input type="checkbox" name="mo-switch--reverse" checked>
							<i class="icon"></i>
							<span>switch large reverse</span>
						</label>
					</fieldset>
				</form>	
			</section>
		</main>
	</article>

</body>
</html>